<template>
  <div class="content1">
    <!--  订单汇总列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('menu.productionDetails')"
      model
      :visible.sync="isorderlDialog"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      :before-close="handleClose"
    >
      <div class="header">
        <!--          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="handleQuerySonClass" />-->
        <div class="search" :class="{active: !caret}">
          <div v-for="(item, index) in searDatas" :key="index" class="hang">
            <span v-if="index<conceal">
              <el-select v-model="item.fenglish" placeholder="请选择" size="mini" filterable @change="gatherData(item)">
                <el-option
                  v-for="iten in selectData"
                  :key="iten.fenglish"
                  :label="iten.fdisplay"
                  :value="iten.fenglish"
                />
              </el-select>
              <el-input v-model="item.val" class="searInt" @blur="gatherData()" @keyup.enter.native="gatherData(1)">
                <i v-if="index>0" class="el-icon-remove-outline" @click="delSear(index)" />
              </el-input>
            </span>
          </div>
          <div v-show="!caret" class="newSear" @click="newSearch">
            <i class="el-icon-circle-plus-outline" />
            新增条件
          </div>
          <div class="posit">
            <i v-show="caret" class="el-icon-d-arrow-left" @click="searShow()" />
            <i v-show="!caret" class="el-icon-d-arrow-right" @click="noShow()" />
          </div>
        </div>
        <el-button type="primary" class="btn" size="mini" @click="handleQuerySonClass">{{ $t('btn.search') }}</el-button>
      </div>
      <div class="table-content">
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          :table-height="tableHeight"
          serial
          @clickRow="orderSelectRow"
        >
          <!--禁用状态-->
          <template v-slot:tagSlot="col">
            <el-tag v-if="col.scope.row.fcloseStatus==='A'">{{ $t('market.no') }}</el-tag>
            <el-tag v-else type="danger">{{ $t('market.yes') }}</el-tag>
          </template>
          <!--审核状态-->
          <template v-slot:btnState="col">
            <el-tag :type="col.scope.row.stateColor">{{ col.scope.row.fdocumentStatus }}</el-tag>
          </template>
        </jc-table>
      </div>
      <!--    分页器-->
      <div class="footer">
        <jc-pagination
          :total="total"
          :page.sync="currentPage"
          :limit.sync="size"
          @pagination="handleGetUntreated"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import searData from '@/components/Search/mixin'
import { queryTPrdMoList } from '@/api/production/productionList'
import { toMxAmina } from '@/components/ToMxamineState'
export default {
  mixins: [searData],
  props: {
    msg: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      conceal: 1,
      ftype: 15,
      val: '',
      caret: true,
      searDatas: [{ fenglish: 'fpaezText', val: '' }],
      searInput: {},
      tableHeight: '400px',
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 50, // 每页显示多少条数据
      isorderlDialog: true,
      // 表头
      tableData: [], // 销售数据
      tableHeader: [
        { label: this.$t('market.placedate'), prop: 'fdate', minWidth: '100px' },
        { label: this.$t('market.order'), prop: 'fbillNo', minWidth: '110px' },
        { label: this.$t('market.paezText1'), prop: 'fpaezText', minWidth: '110px' },
        { label: this.$t('market.cust'), prop: 'customer', minWidth: '150px' },
        { label: this.$t('market.forbidStatu'), type: 'tag', minWidth: '100px' },
        { label: this.$t('market.documentstatus'), type: 'state', minWidth: '100px' }
      ],
      prodValue: { fbillNo: '', customer: '', isorderlDialog: true }
    }
  },
  created() {
    this.handleGetUntreated()
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 350px)' : '400px'
  },
  methods: {
    // 获取生产列表数据
    async handleGetUntreated() {
      const DATA = { pageNum: this.currentPage, pageSize: this.size, ...this.searInput }
      await queryTPrdMoList(DATA).then(RES => {
        if (RES.code === 0) {
          this.tableData = RES.data.array.map(item => {
            return toMxAmina(item)
          })
          this.total = RES.data.total
        } else {
          this.$confirm(RES.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 搜索
    handleQuerySonClass() {
      this.currentPage = 1
      this.handleGetUntreated()
    },
    // 客户弹窗选中
    orderSelectRow(item) {
      this.prodValue = item
      this.$emit('order', this.prodValue)
    },
    // 关闭前回调
    handleClose() {
      this.$emit('order', this.prodValue)
    },
    gatherData(ev) {
      this.searInput = {}
      this.searDatas.forEach(item => {
        if (item.fenglish === 'fdate') { // 日期
          item.start = 'sd'
          item.end = 'ed'
          this.$set(this.searInput, item.start, item.val[0])
          this.$set(this.searInput, item.end, item.val[1])
        } else {
          this.$set(this.searInput, item.fenglish, item.val)
        }
      })
      ev === 1 && this.handleGetUntreated()
    },
    // 下拉
    searShow() {
      if (this.searDatas.length < 2) {
        this.searDatas.push({ fenglish: '', val: '' })
      }
      this.caret = false
      this.conceal = 15
    },
    // 收回
    noShow() {
      this.caret = true
      this.conceal = 1
    },
    // 新增条件
    newSearch() {
      this.searDatas.push({})
    },
    // 删除条件
    delSear(index) {
      this.searDatas.splice(index, 1)
      this.gatherData()
    }
  }
}
</script>

<style scoped lang="scss">
.content1 {
  @include listBom;
  .active{
    border-radius: 3px;
    box-shadow: 0 0 3px #1e9fff;
  }
  .el-dialog {
    &::v-deep .el-dialog__body{
      padding: 20px!important;
    }
  }
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .header {
    position: relative;
    margin-bottom: 20px;
    .search {
      position: absolute;
      top: 0;
      width: 450px;
      background: #fff;
      padding: 5px;
      z-index: 10;
      .searInt {
        width: 180px;
        margin: 0 10px;
      }

      /** 左侧宽度 */
      &::v-deep .el-input.el-input--mini.el-input--suffix {
        width: 210px
      }
      /** 右侧宽度 */
      .selectStus::v-deep .el-input.el-input--mini.el-input--suffix{
        width: 240px;
      }
      .el-date-editor--datetimerange.el-input__inner{
        width: 240px;
      }
    }
    .btn {
      transform: translateY(32%);
      margin-left: 450px;
    }
    .btn1 {
      transform: translateY(32%);
    }
    .hang {
      margin-bottom: 5px;
    }
    .posit{
      position: absolute;
      top: 1.12vh;
      right: 0.624vw;
      i{
        font-size: 14px;
        color: #737577;
      }
      .el-icon-d-arrow-left{
        transform: rotate(90deg);
      }
      .el-icon-d-arrow-right{
        transform: rotate(90deg);
      }
    }
    .posit:hover{
      box-shadow: 0 0 0.052vw #aaa;
    }
    .newSear{
      cursor: pointer;
      font-size: 12px;
      color: #409EFF;
      margin-bottom: 10px;
    }
  }
}
</style>
